<template>
  <div class="c_body">
    <img
      v-for="(item, index) in list"
      :key="index"
      :src="item.status == 1 ? treePath : treeOverPath"
      alt=""
      :style="{ left: item.x + 'px', top: item.y + 'px' }"
      @click="imgClick(item)"
    />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      treePath: require("@/assets/image/tree.png"),
      treeOverPath: require("@/assets/image/tree_over.png"),
      list: [
        { name: "C-油松-001", x: 348, y: 572, status: 1, number: "C-YS-001" },
        { name: "C-油松-002", x: 338, y: 572, status: 1, number: "C-YS-002" },
        { name: "C-油松-003", x: 318, y: 572, status: 1, number: "C-YS-003" },
        { name: "'C-油松-004", x: 308, y: 572, status: 1, number: "C-YS-004" },
        { name: "C-油松-005", x: 315, y: 572, status: 1, number: "C-YS-005" },
        { name: "C-油松-006", x: 315, y: 562, status: 1, number: "C-YS-006" },
        { name: "C-油松-007", x: 315, y: 575, status: 1, number: "C-YS-007" },
        { name: "C-油松-008", x: 305, y: 575, status: 1, number: "C-YS-008" },
        { name: "C-油松-009", x: 295, y: 575, status: 1, number: "C-YS-009" },
        { name: "C-油松-010", x: 285, y: 575, status: 1, number: "C-YS-010" },
        { name: "C-油松-011", x: 275, y: 575, status: 1, number: "C-YS-011" },
        { name: "C-油松-012", x: 265, y: 575, status: 1, number: "C-YS-012" },
        { name: "C-油松-013", x: 255, y: 575, status: 1, number: "C-YS-013" },
        { name: "C-油松-014", x: 255, y: 575, status: 1, number: "C-YS-014" },
        { name: "C-油松-016", x: 265, y: 575, status: 1, number: "C-YS-016" },
        { name: "C-油松-017", x: 275, y: 570, status: 1, number: "C-YS-017" },
        { name: "C-灌木-020", x: 295, y: 575, status: 1, number: "C-GM-020" },
        { name: "C-桧柏-021", x: 295, y: 560, status: 1, number: "C-GB-021" },
        { name: "C-桧柏-022", x: 305, y: 560, status: 1, number: "C-GB-022" },
        { name: "C-樱花-025", x: 345, y: 570, status: 1, number: "C-YH-025" },
        { name: "C-樱花-026", x: 345, y: 560, status: 1, number: "C-YH-026" },
        { name: "C-雪松-028", x: 345, y: 552, status: 1, number: "C-XS-028" },
        { name: "C-桧柏-029", x: 338, y: 570, status: 1, number: "C-GB-029" },
        { name: "C-桧柏-030", x: 334, y: 542, status: 1, number: "C-GB-030" },
        { name: "C-樱花-032", x: 217, y: 517, status: 1, number: "C-YH-032" },
        { name: "C-樱花-033", x: 212, y: 527, status: 1, number: "C-YH-033" },
        { name: "C-鸡瓜槭-034", x: 222, y: 547, status: 1, number: "C-JZ-034" },
        { name: "C-鸡瓜槭-035", x: 212, y: 547, status: 1, number: "C-JZ-035" },
        { name: "C-桧柏-039", x: 187, y: 527, status: 1, number: "C-GB-039" },
        { name: "C-鸡瓜槭-040", x: 187, y: 552, status: 1, number: "C-JZ-040" },
        { name: "C-桧柏-041", x: 207, y: 528, status: 1, number: "C-GB-041" },
        { name: "C-悬铃木-042", x: 199, y: 527, status: 1, number: "C-XL-042" },
        { name: "C-白皮枫-043", x: 207, y: 518, status: 1, number: "C-BP-043" },
        { name: "C-元宝槭-044", x: 187, y: 512, status: 1, number: "C-YB-044" },
        { name: "C-SC-046", x: 199, y: 517, status: 1, number: "C-SC-046" },
        { name: "C-元宝槭-048", x: 187, y: 502, status: 1, number: "C-YB-048" },
        { name: "C-SL-050", x: 187, y: 474, status: 1, number: "C-SL-050" },
        { name: "C-白皮枫-060", x: 228, y: 466, status: 1, number: "C-BP-060" },
        { name: "C-碧桃-061", x: 238, y: 466, status: 1, number: "C-SZ-061" },
        { name: "C-油松-062", x: 248, y: 466, status: 1, number: "C-YS-062" },
        { name: "C-五角枫-063", x: 258, y: 466, status: 1, number: "C-WJ-063" },
        { name: "C-五角枫-064", x: 268, y: 466, status: 1, number: "C-WJ-064" },
        { name: "C-油松-065", x: 258, y: 470, status: 1, number: "C-YS-065" },
        { name: "C-油松-066", x: 265, y: 475, status: 1, number: "C-YS-066" },
        { name: "C-油松-069", x: 256, y: 492, status: 1, number: "C-YS-069" },
        { name: "C-油松-070", x: 265, y: 495, status: 1, number: "C-YS-070" },
        { name: "C-油松-076", x: 285, y: 501, status: 1, number: "C-YS-076" },
        { name: "C-油松-077", x: 288, y: 470, status: 1, number: "C-YS-077" },
        { name: "C-油松-078", x: 295, y: 465, status: 1, number: "C-YS-078" },
        { name: "C-鸡瓜槭-080", x: 305, y: 465, status: 1, number: "C-JZ-080" },
      ],
    };
  },
  props: ["documentHeight", "listData"],
  computed: {},
  watch: {
    listData: {
      handler(newV) {
        newV.map((x) => {
          this.list.map((j, i) => {
            if (x.name == j.name) {
              j = { ...j, ...x };
              this.$set(this.list, i, j);
            }
          });
        });
      },
      deep: true,
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const ratio = (this.documentHeight * 4) / 812;
      const xOffset = -30;
      const yOffset = -60;
      this.list.map((item) => {
        item.x = item.x * ratio + xOffset * ratio;
        item.y = item.y * ratio + yOffset * ratio;
      });
    },
    imgClick(item) {
      this.poi = item;
      this.$emit("imgClick", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.c_body {
  img {
    position: absolute;
    top: 70px;
    width: 20px;
    height: 20px;
  }
}
</style>
